{extend name="base" /}
{block name="body"}
<div id="loading"></div>
<div id="showresult">
    <div class="close" onclick="$('#showresult').hide()">&times;</div>
    <table border="1" width="100%">
        <thead>
            <tr>
                <th>昵称</th>
                <th>账号</th>
                <th>密码</th>
            </tr>
        </thead>
        <tbody>
            <!-- <tr><td></td></tr> -->
        </tbody>
    </table>
</div>
<div class="layui-body">
    <style type="text/css">
        #showresult{
            width:400px;height:400px;position: fixed;top:50%;left:50%;z-index: 999999999;
            transform: translate(-50%,-50%);background:#fff;box-shadow: 0 0 5px #666;
            border-radius: 4px;padding:25px; overflow-y: auto;
            display: none;
        }
        #showresult td{
            text-align: center;
        }
        #showresult .close{
            position: absolute;width:20px;height:20px;border-radius: 50%;background:rgba(0,0,0,0.8);
            top:-0px;right:-0px;color:#fff;text-align: center;line-height: 18px;cursor: pointer;
        }

        #jingdutiao{
            width:100%;height:100%;background:rgba(0,0,0,0.3);position: fixed;top:0;left:0;z-index: 99999999;
            display: flex;font-size: 12px;align-items: center;
            flex-direction: column; justify-content: center;
            display: none;
        }
        #jingdutiao .bar{
            width:300px;height:16px;border-radius: 4px;background:#666;overflow:hidden;
        }
        #jingdutiao .bar .value{
            height:16px;background:#fff;
            transition: all 0.3s;
        }
    </style>
    <div id="jingdutiao">
        <div class="bar">
            <div class="value" style="width:0%;"></div>
        </div>
        正在创建...
    </div>
    <!--tab标签-->
    <div class="layui-tab layui-tab-brief">
        <ul class="layui-tab-title">
            <li class=""><a href="{:url('/admin/custm_svc/index')}">查看海草账号</a></li>
            <li class="layui-this">批量添加海草账号</li>
        </ul>
        <div class="layui-tab-content">
            <div class="layui-tab-item layui-show">
                <form class="layui-form form-container" action="{:url('admin/custm_svc/saveFasion')}" method="post">

                    <div class="layui-form-item">
                        <label class="layui-form-label">组长账号</label>
                        <div class="layui-input-block">
                           <select id="zuzhang" name="zuzhang">
                               <option>请选择</option>
                           </select>
                        </div>
                    </div>
                    <div class="layui-form-item">
                        <label class="layui-form-label">来源二维码</label>
                        <div class="layui-input-block">
                           <select id="laiyuanewm" name="laiyuanewm">
                               <option>请选择</option>
                           </select>
                        </div>
                    </div>
                    <div class="layui-form-item">
                        <label class="layui-form-label">账号前缀</label>
                        <div class="layui-input-block">
                            <input id="qianzuo" type="text" name="hrefeer"  required  lay-verify="required" placeholder="请输入账号前缀" class="layui-input wx_hrefeer">
                        </div>
                    </div>
                    <div class="layui-form-item">
                        <label class="layui-form-label">起始编号</label>
                        <div class="layui-input-block">
                            <input id="startnum" type="text" name="hfrom"  placeholder="请输入起始编号" class="layui-input wx_hfrom">
                        </div>
                    </div>

                    <div class="layui-form-item">
                        <label class="layui-form-label">微信号</label>
                        <div class="layui-input-block">
                            <textarea id="wxList" name="wechat"  placeholder="微信号" class="layui-textarea wx_hreply1"></textarea>
                        </div>
                    </div>
                    <div class="layui-form-item">
                        <label class="layui-form-label">离线回复</label>
                        <div class="layui-input-block">
                            <textarea id="msgText" name="hreply2"  placeholder="离线回复" class="layui-textarea wx_hreply2"></textarea>
                        </div>
                    </div>
                    <div id="typetwo" >
                        <div id="onlywechat">
                            <div class="layui-form-item">
                                <label class="layui-form-label">二维码</label>
                                <div class="layui-input-block">
                                    <button type="button" id="hfsion" class="layui-btn">上传二维码</button>
                                    <div id="photo-container"></div>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="layui-form-item">
                        <label class="layui-form-label">密码</label>
                        <div class="layui-input-block">
                            <input id="pwd" type="text" value="123456" name="passwd" value="0" required  lay-verify="required" class="layui-input wx_passwd">
                        </div>
                    </div>

                    <div class="layui-form-item">
                        <label class="layui-form-label">备注</label>
                        <div class="layui-input-block">
                            <input id="remark" type="text" name="remark"  placeholder="请输入备注" class="layui-input wx_remark">
                        </div>
                    </div>

                    <div class="layui-form-item">
                        <div class="layui-input-block">
                            <div id="tijiao" type="button" class="layui-btn">保存</div>
                            <button type="reset" class="layui-btn layui-btn-primary">重置</button>
                        </div>
                    </div>
                </form>
            </div>
        </div>
    </div>
</div>
{/block}
{block name="js"}
<script src="__JS__/kindeditor/kindeditor.config.js"></script>
<script src="__JS__/kindeditor/kindeditor-all-min.js"></script>
{/block}
{block name="script"}
<script>
    var arr = [];
    var resultstr = []
    $(function () {
        $('#loading').fadeOut()

        $.get('/admin/Custm_svc/getPersonCustom',function (res) {
            var html = '<option value="">请选择</option>'
            res.cs_list.forEach(function (item) {
                html += '<option value="'+item.id+'">'+item.nickname+'</option>'
            })
            $('#zuzhang').html(html)
            form.render()
        })
        $.get('/admin/Qrcode/getQrList',function (res) {
            var html1 = '<option value="">请选择</option>'
            res.qr_list.forEach(function (item) {
                html1 += '<option value="'+item.scene_id+'">'+item.name+'</option>'
            })
            $('#laiyuanewm').html(html1)
            form.render()
        })

        $('#hfsion').click(function () {
            var fileIput = document.createElement('input')
            fileIput.setAttribute('type', 'file')
            fileIput.setAttribute('multiple', 'multiple')
            fileIput.click()
            fileIput.onchange = function () {
                var files = this.files;
                (function _hupload(index) {
                    if(index == files.length) {
                        console.log('上传完成')
                        $('#wxList').val('')
                        console.log(arr)
                        arr.forEach(function(item, index1){
                            if (index1 === 0) {
                                $('#wxList').val(item.name)
                            } else {
                                $('#wxList').val($('#wxList').val() + '\n' + item.name)
                            }
                            
                        })
                        $('#photo-container').html(arr.length + '张二维码')
                        return
                    }
                    var data = new FormData()
                    data.append('single_img', files[index])
                    var fileName = files[index].name.split('.')[0]
                    $.ajax({
                        url: '/api/upload/qrcode',
                        type: 'POST',
                        cache: false,
                        data: data,
                        processData: false,
                        contentType: false,
                        dataType: "json",
                        success: function (res) {
                            res.name = fileName
                            arr.push(res)
                            _hupload(index+1)
                        }
                    })
                })(0)
            }
        })

        $('#tijiao').click(function () {
            var qianzuo = $('#qianzuo').val(),
                    startnum = parseInt($('#startnum').val()),
                    wxList = $('#wxList').val() ? $('#wxList').val().split('\n') : [],
                    msgText = $('#msgText').val(),
                    pwd = $('#pwd').val(),
                    remark = $('#remark').val();
                    zuzhang = $('#zuzhang').val();
                    laiyuanewm = $('#laiyuanewm').val();
            var resultList = []
            console.log('微信\t账号\t密码');
            $('#jingdutiao').fadeIn()
            $('#jingdutiao').css({
                display: 'flex'
            });
            (function _addcsuser(index) {
                if (index === wxList.length) {
                    console.log(resultstr)
                    $('#showresult tbody').html('')
                    var _html = ''
                    resultstr.forEach(function (items) {
                        _html += '<tr class="item"> <td>'+items.nickname+'</td> <td>'+items.username+'</td> <td>'+items.password+'</td> </tr>'
                    })
                    $('#showresult tbody').html(_html)
                    $('#showresult').show();
                    $('#jingdutiao').fadeOut()
                    return
                }
                let data = {
                    nickname: wxList[index],
                    pid: zuzhang,
                    password: pwd,
                    remark: remark,
                    username: qianzuo + (startnum + index),
                    img_path: '',
                    u_scene_id: laiyuanewm,
                    scene_id: laiyuanewm,

                }
                addCsuser(data, function (res) {
                    if (res.data.errmsg == 'ok') {
                        resultList.push({
                            status: 1,
                            data: data
                        })
                    } else {
                        resultList.push({
                            status: -1,
                            data: data
                        })
                    }
                    var auto_reply_img = ''
                    arr.forEach(function (item) {
                        item = item || {}
                        if (item && item.name === wxList[index]) {
                            auto_reply_img = item.url
                        }
                    })
                    var auto_reply_text = msgText.replace('${wx}', wxList[index])
                    let remsg = {
                        auto_reply_img: auto_reply_img,
                        auto_reply_text: auto_reply_text
                    }
                    setReMsg(res.csid, remsg, function (res1) {
                        // resultstr += data.nickname + "\t" + data.username + '\t' + data.password + '\n'
                        resultstr.push({
                            username: data.username,
                            nickname: data.nickname,
                            password: data.password
                        })
                        var a  = index+1 / wxList.length * 100
                        $('#jingdutiao .bar .value').css({
                            width: a +'%'
                        })
                        _addcsuser(index + 1)
                    })
                })
            })(0)
        })

    })



    function addCsuser (data, callback) {
        data.confirm_password = data.password
        $.post('/admin/custm_svc/addCustNew', data, function (res) {
            callback(res)
        })
    }
    function setReMsg (id, data, callback) {
        $.post('/admin2/custm_svc/saveReply?id='+ id, data, function (res) {
            callback(res)
        })
    }
</script>
{/block}

